<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="h-full" v-if="props.userSaveData.length == 0"
    ><el-empty class="h-full" description="暂无数据"
  /></div>

  <div class="bg-light-900 h-full" v-else>
    <div class="p-4">
      <div class="bg-white p-4 rounded-lg">
        <div class="text-gray-400 my-4"> {{ props.userSaveData[currentPage - 1].time }} </div>
        <div
          class="mb-4"
          v-if="!isEdit"
          v-html="props.userSaveData[currentPage - 1].htmlData"
        ></div>
        <div class="mb-4" v-if="isEdit"
          ><wangEditor ref="valueHtml" :vHtml="props.userSaveData[currentPage - 1].htmlData"
        /></div>
        <div class="flex">
          <div
            class="border-1 border-gray-400 border-solid px-4 py-0.25 rounded-3xl flex items-center mr-4 cursor-pointer hover:border-indigo-600 hover:text-indigo-600"
          >
            <Icon icon="ant-design:copy-outlined" :size="14" color="" class="pr-1" /> 复制
          </div>
          <div
            class="border-1 border-gray-400 border-solid px-4 py-0.25 rounded-3xl flex items-center mr-4 cursor-pointer hover:border-indigo-600 hover:text-indigo-600"
            @click="editContent"
          >
            <Icon icon="ant-design:edit-outlined" :size="14" color="" class="pr-1" />
            {{ isEdit ? '保存' : '编辑' }}
          </div>
          <div
            class="border-1 border-gray-400 border-solid px-4 py-0.25 rounded-3xl flex items-center mr-4 cursor-pointer hover:border-indigo-600 hover:text-indigo-600"
          >
            <Icon icon="tabler:file-export" :size="14" color="" class="pr-1" /> 导出
          </div>
          <div
            class="border-1 border-solid px-4 py-0.25 rounded-3xl flex items-center mr-4 cursor-pointer"
            :class="
              props.userSaveData[currentPage - 1].isCollectible
                ? 'border-indigo-600 bg-indigo-600 text-white hover:bg-indigo-400'
                : 'border-gray-400 hover:border-indigo-600 hover:text-indigo-600'
            "
          >
            <Icon
              :icon="
                props.userSaveData[currentPage - 1].isCollectible
                  ? 'teenyicons:star-solid'
                  : 'teenyicons:star-outline'
              "
              :size="14"
              color=""
              class="pr-1"
            />
            {{ props.userSaveData[currentPage - 1].isCollectible ? '已收藏' : '收藏' }}
          </div>
        </div>
      </div>
    </div>
    <el-pagination
      class="justify-end pr-6"
      background
      layout="prev, pager, next"
      v-model:current-page="currentPage"
      :page-count="props.userSaveData.length"
      :total="10"
    />
  </div>
</template>

<script setup lang="ts">
import wangEditor from './wang-editor.vue'
// 应获取的数据
const props = defineProps<{
  userSaveData: {
    time: string
    isCollectible: boolean
    htmlData: string
  }[]
}>()
console.log(props.userSaveData)

const currentPage = ref(1)

const isEdit = ref(false)
const editContent = () => {
  if (!isEdit.value) {
    isEdit.value = true
  }
  // 保存数据
  else {
    isEdit.value = false
  }
}
</script>
